import { useState } from 'react'
import classNames from 'classnames'
import './index.css' // 在js文件中导入，而不是在css文件中导入css文件，所以是import，而不是@import。

function CSSYSCL() {
	const [selectName, setSelectName] = useState('张三')
	const [users] = useState([
		{ name: '张三', age: 25 },
		{ name: '李四', age: 26 },
		{ name: '王五', age: 27 },
	])

	const handleClick = (name) => {
		setSelectName(name)
	}

	return (
		<>
			{/* 行内样式 */}
			<div style={{ color: 'blue', fontSize: '40px' }}>行内样式</div>

			<hr />

			{/* 外联样式 */}
			<div className="external-style">class样式</div>

			<hr />

			{/* 动态控制样式 */}
			<ul>
				{users.map((user) => (
					<li
						key={user.name}
						className={`external-style ${user.name === selectName && 'active'}`}
						onClick={() => handleClick(user.name)}
					>
						{user.name} - {user.age}
					</li>
				))}
			</ul>

			<hr />

			{/* classNames 库可以实现动态控制样式，但是需要安装：npm install classnames */}

			<ul>
				{users.map((user) => (
					<li
						key={user.name}
						className={classNames('external-style', { active: user.name === selectName })}
						onClick={() => handleClick(user.name)}
					>
						{user.name} - {user.age}
					</li>
				))}
			</ul>
		</>
	)
}

export default CSSYSCL
